<template>
    <Head>
        <Title>登录</Title>
    </Head>
    <PageHeader title="注册" subtitle="登录" :image="`${$config.public.baseUrl}images/bg/home1/10.png`"/>
    <section class="account padding-top padding-bottom">
        <div class="container-fluid">
            <div class="account__wrapper" data-aos="fade-up" data-aos-duration="800">
                <div class="row g-4">
                    <div class="col-lg-12">
                        <div class="account__content">
                            <!-- account tittle -->
                            <div class="account__header">
                                <h3>Create an account</h3>
                                <p>Start your 30-day free trail.</p>
                            </div>
                            <!-- account form -->
                            <form action="#" class="account__form" @submit.prevent="handleSubmit">
                                <div class="row g-4">
                                    <div class="col-lg-12">
                                        手机号：<div class="input-group">
                                            <input type="text" class="form-control" id="account-name"
                                                placeholder="Enter phonenumber" v-model="form.phonenumber" required>
                                            <div class="valid-tooltip">
                                                Looks good!
                                            </div>
                                            <div class="invalid-tooltip">
                                                Please enter a full name
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="col-lg-12">
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="account-email"
                                                placeholder="Enter email" required>
                                            <div class="valid-tooltip">
                                                This email is valid
                                            </div>
                                            <div class="invalid-tooltip">
                                                Please enter a valid email
                                            </div>
                                        </div>
                                    </div> -->
                                   
                                    <div class="col-lg-12">
                                        验证码：<div class="input-group">
                                            <input type="text" class="form-control" id="account-mobile"
                                                placeholder="Enter code" v-model="form.code" required>
                                                <div v-if="flag" style="width: 120px;text-align: center;line-height: 58px;margin-right: 3px;color: cornflowerblue;" @click="getCodeInfo">获取验证码</div>
                                                <div v-if="!flag" style="width: 120px;text-align: center;line-height: 58px;margin-right: 3px;">{{ count }}</div>
                                            <div class="valid-tooltip">
                                                This mobile is valid
                                            </div>
                                            <div class="invalid-tooltip">
                                                Please enter a valid number
                                            </div>
                                        </div>
                                    </div>
                                     <div class="col-lg-12">
                                        密&nbsp;&nbsp;码：<div class="input-group">
                                            <input type="password" class="form-control showhide-pass" id="account-pass"
                                                placeholder="Enter Password" v-model="form.password" required>

                                            <!-- <button type="button" id="btnToggle" class="toggle"><i id="eyeIcon"
                                                    class="fa fa-eye"></i></button> -->
                                            <div class="valid-tooltip">
                                                Looks good!
                                            </div>
                                            <div class="invalid-tooltip">
                                                Enter a strong password
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>

                                <div class="account__form-passcheck">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" value="" id="terms-check">
                                        <label for="terms-check" class="form-check-label">
                                            Agree to our <a href="#"> terms & conditions</a>
                                        </label>
                                    </div>
                                </div>

                                <button type="submit" @click="registerSubmit" class="trk-btn trk-btn--border trk-btn--secondary1 d-block mt-4">注册</button>
                            </form>
                            <!-- account social -->
                            <div class="account__social">
                                <a href="#" class="account__social-btn"><span><img src="/images/others/google.svg"
                                            alt="google icon"></span>
                                    Sign in with google
                                </a>
                            </div>

                            <div class="account__switch">
                                <p>Already have an account? <nuxt-link to="/signin">登录</nuxt-link></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
import {getCode,register} from "@/public/api/imageInfo.js"
export default {
    scrollToTop: true,
    components: { PageHeader },
    data(){
        return {
            form:{},
            flag:true,//true 获取验证码 false 倒计时
            count:59,//倒计时
            timmer:null,//定时器
        }
    },
    methods:{
        registerSubmit(){
            register(this.form).then((res)=>{
                console.log("res",res)
                if(res.code == 200){
                    // console.log(this.$router)
                    this.$router.push('/signin')
                }
            })
        },
        getCodeInfo(){
            getCode(this.form.phonenumber).then((res)=>{
                // console.log(res.data.value)
                this.form.uuid = res.data.value
                this.flag = false
                this.timer = setInterval(() => {  // 注意是 setInterval 不是 setinterval
                    if (this.count > 0) {
                    this.count--
                    } else {
                    this.resetTimer()  // 倒计时结束重置状态
                    }
                }, 1000)
            })
            // console.log("777",this.form)
        },
        resetTimer() {
            clearInterval(this.timer)  // 清除定时器
            this.flag = true          // 恢复获取验证码按钮
            this.count = 59           // 重置倒计时
        }
    },
    Destoryed(){
        this.resetTimer()
    }
}
</script>
